import React, { useEffect } from 'react';

import { Layout, Menu } from 'antd';
import Icon from '../icon';
import { useHistory } from 'react-router-dom';

import { useAppSelector, useAppDispatch } from '@store/hooks';

import {
    getOption,
    setOption,
    hidden,
    getMenu,
    setKeyPath,
    getDefaultOpenKeys,
    setDefaultOpenKeys,
    getDefaultSelectedKeys,
    setDefaultSelectedKeys,
    getOpenKeys,
    setOpenKeys,
    getSelectedKeys,
    setSelectedKeys,
} from '@store/reducers/leftSiderSlice';

const { SubMenu } = Menu;
const { Sider } = Layout;

function LeftSider(props: any) {
    // console.log('LeftSider');

    // useEffect(() => {
    //     console.log('componentDidMount&&componentDidUpdate');
    //     return function clear() {
    //         console.log('componentWillUnmount');
    //     };
    // });

    // useEffect(() => {
    //     console.log('componentDidMount []');
    // }, []);

    const dispatch = useAppDispatch();
    const history = useHistory();

    const option = useAppSelector(getOption);
    let { hidden } = option;
    const menu = useAppSelector(getMenu);
    const openKeys = useAppSelector(getOpenKeys);
    const selectedKeys = useAppSelector(getSelectedKeys);
    const selectedKey = selectedKeys[0] || '/';

    function subMenuOpenChange(openKeys: any) {
        dispatch(setOpenKeys(openKeys));
    }
    function itemOnClick(item: any) {
        // let keyPath = item.keyPath;
        // dispatch(setKeyPath(keyPath));
        let path = item.key || '/';
        if (selectedKey !== path) {
            // dispatch(setKeyPath(keyPath));
            dispatch(setSelectedKeys([item.key]));
            history.push(path);
        }
    }

    // 循环生成菜单
    function loadMenu(arr: Array<RouterItem>, menuArr: Array<JSX.Element>) {
        arr.forEach((item: RouterItem) => {
            if (!item.leftSide || !item.leftSide.hidden) {
                if ('page' === item.type) {
                    let menuItem = (
                        <Menu.Item
                            key={item.path}
                            title={item.title || ''}
                            icon={<Icon name={item.icon || 'LoadingOutlined'} />}
                        >
                            {item.title || ''}
                        </Menu.Item>
                    );
                    menuArr.push(menuItem);
                } else {
                    let children = item.children || [];
                    let subMenuItems: JSX.Element[] = [];
                    loadMenu(children, subMenuItems);
                    let menuItem = (
                        <SubMenu
                            key={item.path}
                            title={item.title || ''}
                            icon={<Icon name={item.icon || 'LoadingOutlined'} />}
                        >
                            {subMenuItems}
                        </SubMenu>
                    );
                    menuArr.push(menuItem);
                }
            }
        });
        return menuArr;
    }

    let leftMenu: JSX.Element[] = [];
    loadMenu(menu, leftMenu);

    if (hidden) {
        return <div style={{ width: '0', height: 0, display: 'none' }}></div>;
    }
    return (
        <Sider
            width={200}
            className="site-layout-background"
            style={{ overflowY: 'auto', overflowX: 'hidden', background: '#fff', borderRight: '1px solid #eee' }}
        >
            <Menu
                mode="inline"
                // defaultSelectedKeys={defaultSelectedKeys}
                selectedKeys={selectedKeys}
                // defaultOpenKeys={defaultOpenKeys}
                openKeys={openKeys}
                onOpenChange={subMenuOpenChange}
                onClick={itemOnClick}
                style={{ borderRight: 0 }}
            >
                {leftMenu}
            </Menu>
        </Sider>
    );
}

export default LeftSider;
